<template>
  <Popover
    title="选择图标"
    trigger="click"
    placement="bottom"
    v-model:open="visible"
  >
    <template #content>
      <div class="w-full grid grid-cols-10 gap-3">
        <SvgIcon
          class="w-8 h-8 cursor-pointer text-black"
          v-for="icon in icons"
          :key="icon"
          :name="icon"
          style="fill: currentColor"
          @click="onSelect(icon)"
        />
      </div>
    </template>
    <div>
      <Input>
        <template v-if="icon" #prefix>
          <SvgIcon
            class="w-5 h-5 cursor-pointer text-black"
            :name="value"
            style="fill: currentColor"
          />
        </template>
      </Input>
    </div>
  </Popover>
</template>

<script setup lang="tsx">
import { Popover, Input, Space, Form } from 'ant-design-vue';
import _icons from 'virtual:svg-icons-names';
import SvgIcon from '@/components/SvgIcons/Index.vue';
import { computed, ref } from 'vue';

const icons = computed(() => _icons.map((icon) => icon.replace('icon-', '')));

interface Props {
  value?: string;
}

const emit = defineEmits<{
  'update:value': [value: string];
}>();
defineProps<Props>();

const visible = ref<boolean>(false);
const icon = ref<string>('');
const onSelect = (_icon: string) => {
  icon.value = _icon;
  visible.value = false;
  triggerChange(_icon);
};

const formItemContext = Form.useInjectFormItemContext();
const triggerChange = (value: string) => {
  emit('update:value', value);
  formItemContext.onFieldChange();
};
</script>
